<template>
  <div class="components-container" style='height:100vh'>
    <div class='chart-container'>
      <section class="detail-header">
        <div class="col-sm-12 console-title">
          <h5><span class="title">当前监控大盘 </span></h5>
          <div class="stayRight ">
            <el-button @click="setMonitor()">创建监控大盘</el-button>
            <el-button @click="delMonitor()">删除监控大盘</el-button>
          </div>
        </div>
      </section>
      <section class="chartMain">
        <div class="chartChose">
          <div class="chartTop">
            <el-button size="small" class="fr" @click="addMonitor">添加云产品监控</el-button>
            <el-button size="small" class="fr" @click="flowmonitor">带宽监控</el-button>
            <el-button size="small" class="fr" @click="fullScreen">大屏</el-button>
            <el-button size="small" class="fr" @click="pcfullScreen">PC大屏</el-button>
            <el-button size="small" class="fr" @click="showNature">运行指标大屏</el-button>
          </div>
        </div>
        <div class="chartShow">
          <div class="chartChildItem" v-for="(item,index) in cityArr" :key="index">
            <div class="chart-panel" :id="item.qid"></div>
          </div>
        </div>
      </section>
      <!-- 添加云产品监控 -->
      <el-dialog title="添加云产品监控" :visible.sync="createMonitor" :lock-scroll="false" size="full">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="选择产品" prop="prod">
            <el-select v-model="ruleForm.prod" clearable placeholder="请选择">
              <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图表类型" prop="chartType" class="chartType">
            <el-select v-model="ruleForm.chartType" placeholder="请选择" @change="changeChartType">
              <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="proChart" id="proChart"></div>
          <el-form-item label="监控项" prop="monitor">
            <el-select v-model="ruleForm.monitor" clearable placeholder="请选择">
              <!-- <el-option v-for="item in options1" :key="item.type" :label="item.name" :value="item.type">
                    </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="过滤" prop="filter">
            <el-select v-model="ruleForm.filter" clearable placeholder="请选择">
              <!-- <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
                    </el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
            <el-button @click="createRule = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 大屏展示 -->
      <el-dialog title="应用保障系统大屏展示" :visible.sync="tofullScreen" top="0" :lock-scroll="false" size="large" custom-class="screen">
        <div class="screenbd">
          <div class="fl screenItem">
            <div class="sitem1">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="sitem1" class="itemleft"></div>
            </div>
            <div class="sitem1 crumble">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="crumble" class="itemleft"></div>
            </div>
            <div class="sitem1">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="neterror" class="itemleft"></div>
            </div>
          </div>
          <div class="fl screenMap">
            <div class="sitem2">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="sitem2" class="itemmid"></div>
              <div class="mapbt">
                <ul>
                  <li class="fl">
                    <h5>用户活跃数</h5>
                    <div class="mapChild ">
                      <!-- <div class="maptop">
                              <dl class="fl">
                                <dt>响应时间</dt>
                                <dd>7.7千ms</dd>
                              </dl>
                              <dl class="fl">
                                <dt>可用率</dt>
                                <dd>65.2%</dd>
                              </dl>
                              <dl class="fl">
                                <dt>请求次数</dt>
                                <dd>6.66万</dd>
                              </dl>
                            </div> -->
                      <div id="userRep" class="mapChildm"></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="fl screenItem screenItemRight">
            <div class="sitem3 fl" v-for="(item,index) in mapDataArr" :key="index">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div style="overflow:hidden">
                <div :id="item.qid" class="mapData fl"></div>
                <ul class="fl">
                  <li>响应时间 : 33ms</li>
                  <li>请求次数 : 532万</li>
                  <li>请求成功 : 530万</li>
                  <li>请求成功率 : 99%</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 大屏展示 -->
      <el-dialog title="PC应用保障系统大屏展示" :visible.sync="pctofullScreen" top="0" :lock-scroll="false" size="large" :show-close="pcclosePscreen" custom-class="screen">
        <div slot="title" class="dialog-footer">
          <span style="color:#fff">PC应用保障系统大屏展示</span>
          <el-button @click="clickRange('time',-1)">上一小时</el-button>
          <el-button @click="clickRange('time',1)">下一小时</el-button>
          <el-button @click="clickRange('now',0)">now</el-button>
        </div>
        <div class="screenbd">
          <div class="fl screenItem" style="width:20%">
            <div class="sitem1" style="height:386px;">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <span class="angle anglerb"></span>
              <div id="sitem1" class="itemleft" style="margin-top:50px;"></div>
            </div>
            <div class="sitem1 crumble" style="height:388px">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="crumble" class="itemleft" style="margin-top:40px;height:320px;"></div>
            </div>
            <!-- <div class="sitem1">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="neterror" class="itemleft"></div>
            </div> -->
          </div>
          <div class="fl screenMap" style="width:50%;">
            <div class="sitem2">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div id="sitem2" class="itemmid" style="height:788px;"></div>
            </div>
          </div>
          <div class="fl screenItem screenItemRight" style="width:28%;">
            <div class="sitem3 fl" v-for="(item,index) in mapDataArr" :key="index">
              <span class="angle anglelt"></span>
              <span class="angle anglelb"></span>
              <span class="angle anglert"></span>
              <span class="angle anglerb"></span>
              <div style="overflow:hidden">
                <div style="color: #e2fdff;font-size: 18px;">{{index}}</div>
                <div :id="index" class="mapData fl"></div>
                <!-- <span class="angle anglerb">{{index}}</span> -->
                <ul class="fl">
                  <li>响应时间 : {{item.avgTime}}ms</li>
                  <li>请求次数 : {{item.total}}</li>
                  <li>请求成功 : {{item.success}}</li>
                  <li>请求成功率 : {{item.rate}}%</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 运行指标大屏展示 -->
      <el-dialog :title="updateTime" center :visible.sync="natureScreen" top="0" :lock-scroll="true" size="full" custom-class="natureSbg" :show-close="natureClose">
        <div class="navigation">
           <div class="msg">{{pftimemsg}}</div>
           <div class="hourtag">[ <a @click="changeHour(-1)">-1h</a> ]  [ <a @click="changeHour(1)">+1h</a> ]  [ <a @click="changeHour(0)">now</a> ]  </div>
        </div>
        <div class="navigation-time">
          <el-button-group>
            <el-button  v-for="(item,index) in buttonMinArr" :key="index" size="small" @click="changeMin(item)" :type="pfminute == item ? 'primary' : 'default'">
              {{item}}
            </el-button>
          </el-button-group>
        </div>        
        <div class="naturebd">
          <div class="natureCharts" v-for="(item,index) in cpuArr" :key="index">
              <a :href="'../../topology/charts.html?name='+item.domain+'&&type=domain&&parentType=undefined'" target="_blank">
                <div class="nature-panel" :id="'cpu'+item.id">
                </div>
                <div class="cpumem">QPS</br><font :style="{color:(item.qps>item.maxQps?'red':'#e2fdff')}">{{item.qps}}</font></div>
              </a>
              <table class="subtitle">
                <tr>
                  <a :href="''+item.catUrl+'cat/r/t?op=view&domain='+item.domain+'&reportType=day'" target="_blank">      
                    <td style="width: 50%;">响应时间：
  					<span v-if='item.avgRpTime > item.avgTimeThreshold'>
                    		<font color="red">{{item.avgRpTime}}</font>(<font color="orange">{{item.maxAvgRpTime}}</font>)</span>
                    	<span v-else>{{item.avgRpTime}}</span>ms
                    </td>
                  </a>
                  <td style="width: 50%;">活动线程：<font :style="{color:(item.activeThread>item.maxActiveThread?'red':'#e2fdff')}">{{item.activeThread}}</font></td>
                </tr>
                <tr>
                  	<a :href="''+item.catUrl+'cat/r/p?op=view&domain='+item.domain+'&reportType=day'" target="_blank">
	                    <td style="width: 50%;">错误数：
	                    	<span v-if='item.errorNum>item.errorNumThreshold'>
	                    		<font color="red">{{item.errorNum}}</font>(<font color="orange">{{item.maxErrorNum}}</font>)</span>
	                    	<span v-else>{{item.errorNum}}</span>
	                    </td>
                    </a>  
                    <td style="width: 50%;">CPU使用率：<font :style="{color:(item.cpuUsage>item.maxCpuUsage?'red':'#e2fdff')}">{{item.cpuUsage}}%</font></td>
                </tr>
                <tr>
                  <td colspan="2">DB连接数：</td>
                </tr>
                <tr>
                  <td colspan="2">macula：<font :style="{color:(item.maculaActiveCount>item.maxMaculaActiveCount?'red':'#e2fdff')}">{{item.maculaActiveCount}}</font>、core：<font :style="{color:(item.coreActiveCount>item.maxCoreActiveCount?'red':'#e2fdff')}">{{item.coreActiveCount}}</font></td>
                </tr>
              </table>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import '@/api/china'
import { getCity, product, mapDataList, cupList, chinaJson, appAccess, appProvinceReq, queryData, bigqueryData } from '@/api/dashboard'
import echarts from 'echarts'
import screenfull from 'screenfull'
// import axios from 'axios'

export default {
  data() {
    return {
      datepicker: '',
      cityArr: [],
      mapArr: [],
      cpuArr: [],
      updateTime: '',
      operationTime: '',
      pftimemsg: '',
      mapDataArr: [],
      createMonitor: false,
      tofullScreen: false,
      pctofullScreen: false,
      natureScreen: false,
      natureClose: true,
      pcclosePscreen: true,
      delayData: [],
      requestData: [],
      successData: [],
      respose_code_pieData: [],
      range: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      ruleForm: {
        prod: '',
        chartType: '',
        monitor: '',
        filter: ''
      },
      options1: [],
      options2: [{
        name: '折线',
        type: 'line'
      }, {
        name: '柱状',
        type: 'bar'
      }],
      styles: {
        normal: '#e2fdff;',
        max: 'red'
      },
      pfminute: null,
      pfhour: null,
      buttonMinArr: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '47',
        '48',
        '49',
        '50',
        '51',
        '52',
        '53',
        '54',
        '55',
        '56',
        '57',
        '58',
        '59'
      ]
    }
  },
  mounted() {
    // this.showCharts()
    if (this.$route.query.boardLink) {
      this.natureClose = false
      this.showNature()
    }
    if (this.$route.query.queryData) {
      this.pcclosePscreen = false
      this.pcfullScreen()
    }
  },
  methods: {
    showCharts() {
      const _this = this
      getCity(this.listQuery).then(response => {
        const json = response.data
        // console.log(json, 'json')
        _this.cityArr = json.items
        _this.cityArr.forEach(function(element, index) {
          var id = element.qid
          var time = []
          var timeData = []
          element.serTrends.forEach(function(item2) {
            time.push(item2.timePoint)
            timeData.push(item2.reqCnt)
          }, this)
          setTimeout(function() {
            const myChart = echarts.init(document.getElementById(id))
            // 绘制图表
            const option = {
              title: {
                text: element.title
              },
              xAxis: {
                type: 'category',
                data: time
              },
              yAxis: {},
              series: [{
                type: element.type,
                data: timeData
              }]
            }
            myChart.setOption(option)
          }, 1000)
        }, 1000)
      })
    },
    changeMin(val) {
      var listQuery = { minute: val, time: this.operationTime, hour: this.pfhour }
      this.performance(listQuery)
    },
    changeHour(val) {
      var listQuery = { minute: this.pfminute, time: this.operationTime, hour: val, tag: 'tag' }
      this.performance(listQuery)
    },
    addMonitor() {
      this.createMonitor = true
      product().then(response => {
        const json = response.data
        this.options1 = json.data
        console.log(json, 'json')
      })
      this.proChart()
    },
    flowmonitor() {
      window.open('http://insight.infinitus.com.cn/grafana/dashboard/db/ying-yong-bao-zhang-dai-kuan-zhan-yong?orgId=1&from=now-3h&to=now')
    },
    clickRange(timeTag, value) { // 页面初始化
      var _this = this
      if (timeTag === 'time') {
        if (value === -1) {
          _this.range++
          _this.pcscreenfullShow(timeTag, -_this.range)
        } else if (value === 1 && _this.range > 0) {
          _this.range--
          _this.pcscreenfullShow(timeTag, -_this.range)
        } else {
          _this.range = 0
          _this.pcscreenfullShow(timeTag, _this.range)
        }
      } else {
        _this.range = 0
        _this.pcscreenfullShow(timeTag, _this.range)
      }
    },
    fullScreen() {
      this.tofullScreen = true
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.screenfullShow()
    },
    pcfullScreen() {
      this.pctofullScreen = true
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.pcscreenfullShow('now', 0)
    },
    closePscreen(done) {
      // console.log(done, 'done')
      if (screenfull.enabled) {
        screenfull.toggle()
      }
      this.tofullScreen = false
    },
    /*pcclosePscreen(done) {
      if (screenfull.enabled) {
        screenfull.toggle()
      }
      this.pctofullScreen = false
    }, */
    screenfullShow() {
      const _this = this
      setTimeout(function() {
        chinaJson().then(response => {
          // console.log(response.data, 'cccc')
          echarts.registerMap('china', response.data)
          if (map != null && map !== '' && map !== undefined) {
            map.dispose()
          }
          const map = echarts.init(document.getElementById('sitem2'))
          var data = [
            { name: '海门', value: 9 },
            { name: '泉州', value: 13 },
            { name: '莱西', value: 139 },
            { name: '日照', value: 23 },
            { name: '胶南', value: 32 },
            { name: '云浮', value: 42 },
            { name: '烟台', value: 23 },
            { name: '福州', value: 25 },
            { name: '湛江', value: 24 },
            { name: '揭阳', value: 23 },
            { name: '荣成', value: 19 },
            { name: '连云港', value: 39 },
            { name: '葫芦岛', value: 49 },
            { name: '常熟', value: 96 },
            { name: '东莞', value: 59 },
            { name: '三亚', value: 39 },
            { name: '自贡', value: 79 },
            { name: '吉林', value: 95 },
            { name: '阳江', value: 49 },
            { name: '镇江', value: 49 },
            { name: '邯郸', value: 29 },
            { name: '临沂', value: 29 },
            { name: '哈尔滨', value: 59 },
            { name: '聊城', value: 79 },
            { name: '芜湖', value: 89 },
            { name: '大庆', value: 179 }
          ]
          var geoCoordMap = {
            '海门': [121.15, 31.89],
            '泉州': [118.58, 24.93],
            '莱西': [120.53, 36.86],
            '日照': [119.46, 35.42],
            '胶南': [119.97, 35.88],
            '云浮': [112.02, 22.93],
            '烟台': [121.39, 37.52],
            '福州': [119.3, 26.08],
            '湛江': [110.359377, 21.270708],
            '揭阳': [116.35, 23.55],
            '荣成': [122.41, 37.16],
            '连云港': [119.16, 34.59],
            '葫芦岛': [120.836932, 40.711052],
            '常熟': [120.74, 31.64],
            '东莞': [113.75, 23.04],
            '三亚': [109.511909, 18.252847],
            '自贡': [104.778442, 29.33903],
            '吉林': [126.57, 43.87],
            '阳江': [111.95, 21.85],
            '镇江': [119.44, 32.2],
            '邯郸': [114.47, 36.6],
            '临沂': [118.35, 35.05],
            '哈尔滨': [126.63, 45.75],
            '聊城': [115.97, 36.45],
            '芜湖': [118.38, 31.33],
            '大庆': [125.03, 46.58]
          }
          var convertData = function(data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name]
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                })
              }
            }
            return res
          }
          var randomValue = function(data) {
            return Math.round(Math.random() * 1000)
          }
          appProvinceReq().then(response => {
            console.log(response.data.appProvinceReqJson, 'appProvinceReqJson')
            const json = response.data
            _this.mapArr = json.appProvinceReqJson
            var ReqJson = []
            var totalJson = []
            _this.mapArr.forEach(function(element, index) {
              ReqJson.push({ name: element.province, value: element.userCnt })
              totalJson.push({ name: element.province, value: element.totalReq })
            }, 1000)
            console.log(ReqJson, 'ReqJson')
            setTimeout(function() {
              const mapchild1 = echarts.init(document.getElementById('userRep'))
              // 绘制图表
              const optionChild = {
                tooltip: {},
                visualMap: {
                  min: 0,
                  max: 1500,
                  left: 'left',
                  top: 'bottom',
                  text: ['High', 'Low'],
                  seriesIndex: [1],
                  inRange: {
                    color: ['#FAEBD7', '#FF3030']
                  },
                  show: false,
                  calculable: true
                },
                geo: {
                  map: 'china',
                  roam: true,
                  label: {
                    normal: {
                      show: false,
                      textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                      areaColor: null,
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                },
                series: [{
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: convertData(data),
                  // symbol: 'pin',
                  symbolSize: 4,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      borderColor: '#fff',
                      borderWidth: 1
                    }
                  }
                }, {
                  name: '活跃用户数',
                  type: 'map',
                  geoIndex: 0,
                  // tooltip: {show: false},
                  data: ReqJson
                }]
              }
              mapchild1.setOption(optionChild)
              const option2 = {
                backgroundColor: '#242b3e',
                borderColor: '#5d6e9c',
                title: {
                  text: '534534656',
                  subtext: '······ 用户访问量 ······',
                  x: 'center',
                  textStyle: {
                    color: '#b4f5d7'
                  }
                },
                tooltip: {},
                visualMap: {
                  min: 0,
                  max: 100000,
                  calculable: true,
                  inRange: {
                    color: ['#87CEFA', '#7171C6']
                  },
                  textStyle: {
                    color: '#fff'
                  }
                },
                geo: {
                  map: 'china',
                  label: {
                    emphasis: {
                      show: false
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: '#323c48',
                      borderColor: '#111'
                    },
                    emphasis: {
                      areaColor: '#2a333d'
                    }
                  }
                },
                series: [{
                  name: '用户访问量',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: convertData(data),
                  // symbol: 'pin',
                  symbolSize: 8,
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false
                    }
                  },
                  itemStyle: {
                    emphasis: {
                      borderColor: '#fff',
                      borderWidth: 1
                    }
                  }
                }, {
                  name: 'Top 5',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: convertData(data.sort(function(a, b) {
                    return b.value - a.value
                  }).slice(0, 6)),
                  // symbol: 'pin',
                  symbolSize: function(val) {
                    // console.log(val, 'symbolSize')
                    return val[2] / 10
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: 'purple',
                      shadowBlur: 10,
                      shadowColor: '#333'
                    }
                  },
                  zlevel: 1
                }]
              }
              map.setOption(option2)
            }, 1000)
          })
          mapDataList().then(response => {
            const json = response.data
            // console.log(json, 'mapDataList')
            _this.mapDataArr = json.items
            _this.mapDataArr.forEach(function(element, index) {
              var id = element.qid
              var time = []
              var timeData = []
              element.serTrends.forEach(function(item2) {
                time.push(item2.timePoint)
                timeData.push(item2.reqCnt)
              }, this)
              setTimeout(function() {
                const mapdatachild = echarts.init(document.getElementById(id))
                // 绘制图表
                const optiondataChild = {
                  backgroundColor: '#242b3e',
                  borderColor: '#5d6e9c',
                  title: {
                    x: 'center',
                    name: element.title,
                    textStyle: {
                      color: '#b4f5d7'
                    }
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                      return params.name + ' : ' + params.value[2]
                    }
                  },
                  legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['pm2.5'],
                    textStyle: {
                      color: '#fff'
                    }
                  },
                  visualMap: {
                    min: 0,
                    max: 200,
                    calculable: true,
                    show: false,
                    text: ['High', 'Low']
                  },
                  geo: {
                    map: 'china',
                    label: {
                      emphasis: {
                        show: false
                      }
                    },
                    itemStyle: {
                      normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                      },
                      emphasis: {
                        areaColor: '#2a333d'
                      }
                    }
                  },
                  series: [{
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    // symbol: 'pin',
                    symbolSize: 8,
                    label: {
                      normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                      },
                      emphasis: {
                        show: true
                      }
                    },
                    itemStyle: {
                      emphasis: {
                        borderColor: '#fff',
                        borderWidth: 1
                      }
                    }
                  }, {
                    name: 'categoryA',
                    type: 'map',
                    geoIndex: 0,
                    // tooltip: {show: false},
                    data: [
                      { name: '北京', value: randomValue() },
                      { name: '天津', value: randomValue() },
                      { name: '上海', value: randomValue() },
                      { name: '重庆', value: randomValue() },
                      { name: '河北', value: randomValue() },
                      { name: '河南', value: randomValue() },
                      { name: '云南', value: randomValue() },
                      { name: '辽宁', value: randomValue() },
                      { name: '黑龙江', value: randomValue() },
                      { name: '湖南', value: randomValue() },
                      { name: '安徽', value: randomValue() },
                      { name: '山东', value: randomValue() },
                      { name: '新疆', value: randomValue() },
                      { name: '江苏', value: randomValue() },
                      { name: '浙江', value: randomValue() },
                      { name: '江西', value: randomValue() },
                      { name: '湖北', value: randomValue() },
                      { name: '广西', value: randomValue() },
                      { name: '甘肃', value: randomValue() },
                      { name: '山西', value: randomValue() },
                      { name: '内蒙古', value: randomValue() },
                      { name: '陕西', value: randomValue() },
                      { name: '吉林', value: randomValue() },
                      { name: '福建', value: randomValue() },
                      { name: '贵州', value: randomValue() },
                      { name: '广东', value: randomValue() },
                      { name: '青海', value: randomValue() },
                      { name: '西藏', value: randomValue() },
                      { name: '四川', value: randomValue() },
                      { name: '宁夏', value: randomValue() },
                      { name: '海南', value: randomValue() },
                      { name: '台湾', value: randomValue() },
                      { name: '香港', value: randomValue() },
                      { name: '澳门', value: randomValue() }
                    ]
                  }]
                }
                mapdatachild.setOption(optiondataChild)
              }, 1000)
            }, 1000)
          })
        })
        appAccess().then(response => {
          console.log(response.data.appAccessJson, 'dddddd')
          this.delayData = response.data.appAccessJson.delay
          this.requestData = response.data.appAccessJson.request
          this.successData = response.data.appAccessJson.success
          const delayx = []
          const android = []
          const h5 = []
          const ios = []
          this.delayData.forEach(function(item) {
            delayx.push(item.timePoint)
            android.push(item.android)
            h5.push(item.h5)
            ios.push(item.ios)
          })
          const r_delayx = []
          const r_android = []
          const r_h5 = []
          const r_ios = []
          this.requestData.forEach(function(item) {
            r_delayx.push(item.timePoint)
            r_android.push(item.android)
            r_h5.push(item.h5)
            r_ios.push(item.ios)
          })
          const s_delayx = []
          const s_android = []
          const s_h5 = []
          const s_ios = []
          this.successData.forEach(function(item) {
            s_delayx.push(item.timePoint)
            s_android.push(item.android)
            s_h5.push(item.h5)
            s_ios.push(item.ios)
          })
          const crumble = echarts.init(document.getElementById('crumble'))
          const coption = {
            title: {
              text: '崩溃',
              textStyle: {
                color: '#3e8ed7',
                fontSize: 14
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#3e5f8c'
                }
              }
            },
            legend: {
              data: ['android', 'h5', 'ios'],
              x: 'center',
              y: 'bottom',
              textStyle: {
                color: '#acddfb'
              }
            },
            grid: {
              left: '4%',
              right: '4%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: r_delayx,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6284b4'
                }
              }
            }],
            color: ['#fcffa2', '#85ebed', '#c3798a'],
            series: [{
              name: 'android',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: r_android
            },
            {
              name: 'h5',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: r_h5
            },
            {
              name: 'ios',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: { normal: {}},
              data: r_ios
            }]
          }
          crumble.setOption(coption)
          const product = echarts.init(document.getElementById('sitem1'))
          const option = {
            title: {
              text: '平均响应时间',
              textStyle: {
                color: '#3e8ed7',
                fontSize: 14
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#3e5f8c'
                }
              }
            },
            legend: {
              data: ['android', 'h5', 'ios'],
              x: 'center',
              y: 'bottom',
              textStyle: {
                color: '#acddfb'
              }
            },
            grid: {
              left: '4%',
              right: '4%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: delayx,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6284b4'
                }
              }
            }],
            color: ['#fcffa2', '#85ebed', '#c3798a'],
            series: [{
              name: 'android',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: android
            },
            {
              name: 'h5',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: h5
            },
            {
              name: 'ios',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: { normal: {}},
              data: ios
            }
            ]
          }
          product.setOption(option)
          const neterror = echarts.init(document.getElementById('neterror'))
          const noption = {
            title: {
              text: '网络错误',
              textStyle: {
                color: '#3e8ed7',
                fontSize: 14
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#3e5f8c'
                }
              }
            },
            legend: {
              data: ['android', 'h5', 'ios'],
              x: 'center',
              y: 'bottom',
              textStyle: {
                color: '#acddfb'
              }
            },
            grid: {
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              data: s_delayx,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              max: 500,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: true,
                formatter: '{value} ',
                textStyle: {
                  color: '#6284b4'
                }
              }
            }, {
              type: 'value',
              max: 1,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                formatter: '{value} %',
                textStyle: {
                  color: '#6284b4'
                }
              }
            }],
            color: ['#317ee8'],
            series: [{
              name: 'androic成功率',
              xAxisIndex: 0,
              yAxisIndex: 1,
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'dotted',
                    color: '#cce6ff'
                  }
                }
              },
              data: s_android
            }, {
              name: 'h5成功次数',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: s_h5
            }, {
              name: 'ios成功率',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: s_ios
            }]
          }
          neterror.setOption(noption)
        })
      }, 1000)
    },
    pcscreenfullShow(timeTag, value) {
      const _this = this
      var listQuery = { type: timeTag, range: value }
      setTimeout(function() {
        bigqueryData(listQuery).then(response => {
          const bigjson = response.data.bigMapData
          var data = []
          for (var bigkey in bigjson) {
            var hawbMapping = Object()
            hawbMapping.name = bigjson[bigkey].province
            hawbMapping.value = bigjson[bigkey].totalReq
            data.push(hawbMapping)
          }
          chinaJson().then(response => {
            // console.log(response.data, 'cccc')
            echarts.registerMap('china', response.data)
            if (map != null && map !== '' && map !== undefined) {
              map.dispose()
            }
            const map = echarts.init(document.getElementById('sitem2'))
            var geoCoordMap = {
              '香港特别行政区': [114.08, 22.2],
              '澳门特别行政区': [113.33, 22.13],
              '台北': [121.5, 25.03],
              '基隆': [121.73, 25.13],
              '台中': [120.67, 24.15],
              '台南': [120.2, 23.0],
              '宜兰县': [121.75, 24.77],
              '桃园县': [121.3, 24.97],
              '苗栗县': [120.8, 24.53],
              '台中县': [120.72, 24.25],
              '彰化县': [120.53, 24.08],
              '南投县': [120.67, 23.92],
              '云林县': [120.53, 23.72],
              '台南县': [120.32, 23.32],
              '高雄县': [120.37, 22.63],
              '屏东县': [120.48, 22.67],
              '台东县': [121.15, 22.75],
              '花莲县': [121.6, 23.98],
              '澎湖县': [119.58, 23.58],
              '石家庄': [114.52, 38.05],
              '唐山': [118.2, 39.63],
              '秦皇岛': [119.6, 39.93],
              '邯郸': [114.48, 36.62],
              '邢台': [114.48, 37.07],
              '保定': [115.47, 38.87],
              '张家口': [114.88, 40.82],
              '承德': [117.93, 40.97],
              '沧州': [116.83, 38.3],
              '廊坊': [116.7, 39.52],
              '衡水': [115.68, 37.73],
              '太原': [112.55, 37.87],
              '大同': [113.3, 40.08],
              '阳泉': [113.57, 37.85],
              '长治': [113.12, 36.2],
              '晋城': [112.83, 35.5],
              '朔州': [112.43, 39.33],
              '晋中': [112.75, 37.68],
              '运城': [110.98, 35.02],
              '忻州': [112.73, 38.42],
              '临汾': [111.52, 36.08],
              '吕梁': [111.13, 37.52],
              '呼和浩特': [111.73, 40.83],
              '包头': [109.83, 40.65],
              '乌海': [106.82, 39.67],
              '赤峰': [118.92, 42.27],
              '通辽': [122.27, 43.62],
              '鄂尔多斯': [109.8, 39.62],
              '呼伦贝尔': [119.77, 49.22],
              '巴彦淖尔': [107.42, 40.75],
              '乌兰察布': [113.12, 40.98],
              '兴安盟': [122.05, 46.08],
              '锡林郭勒盟': [116.07, 43.95],
              '阿拉善盟': [105.67, 38.83],
              '沈阳': [123.43, 41.8],
              '大连': [121.62, 38.92],
              '鞍山': [122.98, 41.1],
              '抚顺': [123.98, 41.88],
              '本溪': [123.77, 41.3],
              '丹东': [124.38, 40.13],
              '锦州': [121.13, 41.1],
              '营口': [122.23, 40.67],
              '阜新': [121.67, 42.02],
              '辽阳': [123.17, 41.27],
              '盘锦': [122.07, 41.12],
              '铁岭': [123.83, 42.28],
              '朝阳': [120.45, 41.57],
              '葫芦岛': [120.83, 40.72],
              '长春': [125.32, 43.9],
              '吉林': [126.55, 43.83],
              '四平': [124.35, 43.17],
              '辽源': [125.13, 42.88],
              '通化': [125.93, 41.73],
              '白山': [126.42, 41.93],
              '松原': [124.82, 45.13],
              '白城': [122.83, 45.62],
              '延边朝鲜族自治州': [129.5, 42.88],
              '哈尔滨': [126.53, 45.8],
              '齐齐哈尔': [123.95, 47.33],
              '鸡西': [130.97, 45.3],
              '鹤岗': [130.27, 47.33],
              '双鸭山': [131.15, 46.63],
              '大庆': [125.03, 46.58],
              '伊春': [128.9, 47.73],
              '佳木斯': [130.37, 46.82],
              '七台河': [130.95, 45.78],
              '牡丹江': [129.6, 44.58],
              '黑河': [127.48, 50.25],
              '绥化': [126.98, 46.63],
              '大兴安岭地区': [124.12, 50.42],
              '南京': [118.78, 32.07],
              '无锡': [120.3, 31.57],
              '徐州': [117.18, 34.27],
              '常州': [119.95, 31.78],
              '苏州': [120.58, 31.3],
              '南通': [120.88, 31.98],
              '连云港': [119.22, 34.6],
              '淮安': [119.02, 33.62],
              '盐城': [120.15, 33.35],
              '扬州': [119.4, 32.4],
              '镇江': [119.45, 32.2],
              '泰州': [119.92, 32.45],
              '宿迁': [118.28, 33.97],
              '杭州': [120.15, 30.28],
              '宁波': [121.55, 29.88],
              '温州': [120.7, 28.0],
              '嘉兴': [120.75, 30.75],
              '湖州': [120.08, 30.9],
              '绍兴': [120.57, 30.0],
              '金华': [119.65, 29.08],
              '衢州': [118.87, 28.93],
              '舟山': [122.2, 30.0],
              '台州': [121.43, 28.68],
              '丽水': [119.92, 28.45],
              '合肥': [117.25, 31.83],
              '芜湖': [118.38, 31.33],
              '蚌埠': [117.38, 32.92],
              '淮南': [117.0, 32.63],
              '马鞍山': [118.5, 31.7],
              '淮北': [116.8, 33.95],
              '铜陵': [117.82, 30.93],
              '安庆': [117.05, 30.53],
              '黄山': [118.33, 29.72],
              '滁州': [118.32, 32.3],
              '阜阳': [115.82, 32.9],
              '宿州': [116.98, 33.63],
              '巢湖': [117.87, 31.6],
              '六安': [116.5, 31.77],
              '亳州': [115.78, 33.85],
              '池州': [117.48, 30.67],
              '宣城': [118.75, 30.95],
              '福州': [119.3, 26.08],
              '厦门': [118.08, 24.48],
              '莆田': [119.0, 25.43],
              '三明': [117.62, 26.27],
              '泉州': [118.67, 24.88],
              '漳州': [117.65, 24.52],
              '南平': [118.17, 26.65],
              '龙岩': [117.03, 25.1],
              '宁德': [119.52, 26.67],
              '南昌': [115.85, 28.68],
              '景德镇': [117.17, 29.27],
              '萍乡': [113.85, 27.63],
              '九江': [116.0, 29.7],
              '新余': [114.92, 27.82],
              '鹰潭': [117.07, 28.27],
              '赣州': [114.93, 25.83],
              '吉安': [114.98, 27.12],
              '宜春': [114.38, 27.8],
              '抚州': [116.35, 28.0],
              '上饶': [117.97, 28.45],
              '济南': [116.98, 36.67],
              '青岛': [120.38, 36.07],
              '淄博': [118.05, 36.82],
              '枣庄': [117.32, 34.82],
              '东营': [118.67, 37.43],
              '烟台': [121.43, 37.45],
              '潍坊': [119.15, 36.7],
              '济宁': [116.58, 35.42],
              '泰安': [117.08, 36.2],
              '威海': [122.12, 37.52],
              '日照': [119.52, 35.42],
              '莱芜': [117.67, 36.22],
              '临沂': [118.35, 35.05],
              '德州': [116.3, 37.45],
              '聊城': [115.98, 36.45],
              '滨州': [117.97, 37.38],
              '郑州': [113.62, 34.75],
              '开封': [114.3, 34.8],
              '洛阳': [112.45, 34.62],
              '平顶山': [113.18, 33.77],
              '安阳': [114.38, 36.1],
              '鹤壁': [114.28, 35.75],
              '新乡': [113.9, 35.3],
              '焦作': [113.25, 35.22],
              '济源': [112.58, 35.07],
              '濮阳': [115.03, 35.77],
              '许昌': [113.85, 34.03],
              '漯河': [114.02, 33.58],
              '三门峡': [111.2, 34.78],
              '南阳': [112.52, 33.0],
              '商丘': [115.65, 34.45],
              '信阳': [114.07, 32.13],
              '周口': [114.65, 33.62],
              '驻马店': [114.02, 32.98],
              '神农架林区': [110.67, 31.75],
              '武汉': [114.3, 30.6],
              '黄石': [115.03, 30.2],
              '十堰': [110.78, 32.65],
              '宜昌': [111.28, 30.7],
              '鄂州': [114.88, 30.4],
              '荆门': [112.2, 31.03],
              '孝感': [113.92, 30.93],
              '荆州': [112.23, 30.33],
              '黄冈': [114.87, 30.45],
              '咸宁': [114.32, 29.85],
              '随州': [113.37, 31.72],
              '恩施土家族苗族自治州': [109.47, 30.3],
              '仙桃': [113.45, 30.37],
              '潜江': [112.88, 30.42],
              '天门': [113.17, 30.67],
              '长沙': [112.93, 28.23],
              '株洲': [113.13, 27.83],
              '湘潭': [112.93, 27.83],
              '衡阳': [112.57, 26.9],
              '邵阳': [111.47, 27.25],
              '岳阳': [113.12, 29.37],
              '常德': [111.68, 29.05],
              '张家界': [110.47, 29.13],
              '益阳': [112.32, 28.6],
              '郴州': [113.02, 25.78],
              '永州': [111.62, 26.43],
              '怀化': [110.0, 27.57],
              '娄底': [112.0, 27.73],
              '湘西土家族苗族自治州': [109.73, 28.32],
              '广州': [113.5107, 23.2196],
              '韶关': [113.6, 24.82],
              '深圳': [114.05, 22.55],
              '珠海': [113.57, 22.27],
              '汕头': [116.68, 23.35],
              '佛山': [113.12, 23.02],
              '江门': [113.08, 22.58],
              '湛江': [110.35, 21.27],
              '茂名': [110.92, 21.67],
              '肇庆': [112.47, 23.05],
              '惠州': [114.42, 23.12],
              '梅州': [116.12, 24.28],
              '汕尾': [115.37, 22.78],
              '河源': [114.7, 23.73],
              '阳江': [111.98, 21.87],
              '清远': [113.03, 23.7],
              '东莞': [113.75, 23.05],
              '中山': [113.38, 22.52],
              '潮州': [116.62, 23.67],
              '揭阳': [116.37, 23.55],
              '云浮': [112.03, 22.92],
              '南宁': [108.37, 22.82],
              '柳州': [109.42, 24.33],
              '防城港': [108.35, 21.7],
              '来宾': [109.23, 23.73],
              '崇左': [107.37, 22.4],
              '桂林': [110.28, 25.28],
              '梧州': [111.27, 23.48],
              '北海': [109.12, 21.48],
              '钦州': [108.62, 21.95],
              '贵港': [109.6, 23.1],
              '玉林': [110.17, 22.63],
              '百色': [106.62, 23.9],
              '贺州': [111.55, 24.42],
              '河池': [108.07, 24.7],
              '海口': [110.32, 20.03],
              '三亚': [109.5, 18.25],
              '五指山': [109.52, 18.78],
              '琼海': [110.47, 19.25],
              '儋州': [109.57, 19.52],
              '文昌': [110.8, 19.55],
              '万宁': [110.4, 18.8],
              '东方': [108.63, 19.1],
              '定安县': [110.32, 19.7],
              '屯昌县': [110.1, 19.37],
              '澄迈县': [110.0, 19.73],
              '临高县': [109.68, 19.92],
              '白沙黎族自治县': [109.45, 19.23],
              '昌江黎族自治县': [109.05, 19.25],
              '乐东黎族自治县': [109.17, 18.75],
              '陵水黎族自治县': [110.03, 18.5],
              '保亭黎族苗族自治县': [109.7, 18.63],
              '琼中黎族苗族自治县': [109.83, 19.03],
              '成都': [104.07, 30.67],
              '自贡': [104.78, 29.35],
              '攀枝花': [101.72, 26.58],
              '泸州': [105.43, 28.87],
              '德阳': [104.38, 31.13],
              '绵阳': [104.73, 31.47],
              '广元': [105.83, 32.43],
              '遂宁': [105.57, 30.52],
              '内江': [105.05, 29.58],
              '乐山': [103.77, 29.57],
              '南充': [106.08, 30.78],
              '眉山': [103.83, 30.05],
              '宜宾': [104.62, 28.77],
              '广安': [106.63, 30.47],
              '达州': [107.5, 31.22],
              '雅安': [103.0, 29.98],
              '巴中': [106.77, 31.85],
              '资阳': [104.65, 30.12],
              '阿坝藏族羌族自治州': [102.22, 31.9],
              '甘孜藏族自治州': [101.97, 30.05],
              '凉山彝族自治州': [102.27, 27.9],
              '贵阳': [106.63, 26.65],
              '六盘水': [104.83, 26.6],
              '遵义': [106.92, 27.73],
              '安顺': [105.95, 26.25],
              '铜仁': [109.18, 27.72],
              '毕节': [105.28, 27.3],
              '黔东南苗族侗族自治州': [107.97, 26.58],
              '黔南布依族苗族自治州': [107.52, 26.27],
              '昆明': [102.72, 25.05],
              '曲靖': [103.8, 25.5],
              '玉溪': [102.55, 24.35],
              '保山': [99.17, 25.12],
              '昭通': [103.72, 27.33],
              '丽江': [100.23, 26.88],
              '临沧': [100.08, 23.88],
              '楚雄彝族自治州': [101.55, 25.03],
              '红河哈尼族彝族自治州': [103.4, 23.37],
              '文山壮族苗族自治州': [104.25, 23.37],
              '西双版纳傣族自治州': [100.8, 22.02],
              '大理白族自治州': [100.23, 25.6],
              '德宏傣族景颇族自治州': [98.58, 24.43],
              '怒江傈僳族自治州': [98.85, 25.85],
              '迪庆藏族自治州': [99.7, 27.83],
              '拉萨': [91.13, 29.65],
              '山南地区': [91.77, 29.23],
              '日喀则': [88.88, 29.27],
              '那曲地区': [92.07, 31.48],
              '阿里地区': [80.1, 32.5],
              '西安': [108.93, 34.27],
              '铜川': [108.93, 34.9],
              '宝鸡': [107.13, 34.37],
              '咸阳': [108.7, 34.33],
              '渭南': [109.5, 34.5],
              '延安': [109.48, 36.6],
              '汉中': [107.02, 33.07],
              '榆林': [109.73, 38.28],
              '安康': [109.02, 32.68],
              '商洛': [109.93, 33.87],
              '兰州': [103.82, 36.07],
              '嘉峪关': [98.27, 39.8],
              '金昌': [102.18, 38.5],
              '白银': [104.18, 36.55],
              '天水': [105.72, 34.58],
              '武威': [102.63, 37.93],
              '张掖': [100.45, 38.93],
              '平凉': [106.67, 35.55],
              '酒泉': [98.52, 39.75],
              '庆阳': [107.63, 35.73],
              '定西': [104.62, 35.58],
              '陇南': [104.92, 33.4],
              '临夏回族自治州': [103.22, 35.6],
              '甘南藏族自治州': [102.92, 34.98],
              '西宁': [101.78, 36.62],
              '黄南藏族自治州': [102.02, 35.52],
              '海南藏族自治州': [100.62, 36.28],
              '果洛藏族自治州': [100.23, 34.48],
              '玉树藏族自治州': [97.02, 33.0],
              '海西蒙古族藏族自治州': [97.37, 37.37],
              '北京': [116.4, 39.9],
              '天津': [117.2, 39.12],
              '上海': [121.47, 31.23],
              '重庆': [106.55, 29.57],
              '海北藏族自治州': [100.9, 36.97],
              '银川': [106.28, 38.47],
              '石嘴山': [106.38, 39.02],
              '吴忠': [106.2, 37.98],
              '固原': [106.28, 36.0],
              '中卫': [105.18, 37.52],
              '乌鲁木齐': [87.62, 43.82],
              '克拉玛依': [84.87, 45.6],
              '吐鲁番': [89.17, 42.95],
              '哈密地区': [93.52, 42.83],
              '昌吉回族自治州': [87.3, 44.02],
              '博尔塔拉蒙古自治州': [82.07, 44.9],
              '巴音郭楞蒙古自治州': [86.15, 41.77],
              '阿克苏地区': [80.27, 41.17],
              '喀什地区': [75.98, 39.47],
              '和田地区': [79.92, 37.12],
              '伊犁哈萨克自治州': [81.32, 43.92],
              '塔城地区': [82.98, 46.75],
              '阿勒泰地区': [88.13, 47.85],
              '石河子': [86.03, 44.3],
              '阿拉尔': [81.28, 40.55],
              '图木舒克': [79.13, 39.85],
              '五家渠': [87.53, 44.17]
            }
            var data2 = []
            for (var bigkey2 in data) {
              data2.push(bigjson[bigkey2])
            }
            var convertData = function(data) {
              var res = []
              for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name]
                if (geoCoord) {
                  res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                  })
                }
              }
              return res
            }
            var convertedData = [
              convertData(data),
              convertData(data.sort(function(a, b) {
                return b.value - a.value
              }).slice(0, 6))
            ]
            var option = {
              backgroundColor: '#404a59',
              animation: true,
              animationDuration: 1000,
              animationEasing: 'cubicInOut',
              animationDurationUpdate: 1000,
              animationEasingUpdate: 'cubicInOut',
              title: [{
                text: '用户访问量',
                subtext: '',
                sublink: 'http://www.pm25.in',
                left: 'center',
                textStyle: {
                  color: '#fff'
                }
              },
              {
                id: 'statistic',
                right: 120,
                top: 40,
                width: 100,
                textStyle: {
                  color: '#fff',
                  fontSize: 16
                }
              }],
              toolbox: {
                iconStyle: {
                  normal: {
                    borderColor: '#fff'
                  },
                  emphasis: {
                    borderColor: '#b1e4ff'
                  }
                }
              },
              brush: {
                outOfBrush: {
                  color: '#abc'
                },
                brushStyle: {
                  borderWidth: 2,
                  color: 'rgba(0,0,0,0.2)',
                  borderColor: 'rgba(0,0,0,0.5)'
                },
                seriesIndex: [0, 1],
                throttleType: 'debounce',
                throttleDelay: 300,
                geoIndex: 0
              },
              geo: {
                map: 'china',
                left: '10',
                right: '35%',
                center: [117.98561551896913, 31.205000490896193],
                zoom: 1.2,
                label: {
                  emphasis: {
                    show: false
                  }
                },
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                  },
                  emphasis: {
                    areaColor: '#2a333d'
                  }
                }
              },
              tooltip: {
                trigger: 'item'
              },
              grid: {
                right: 40,
                top: 100,
                bottom: 40,
                width: '30%'
              },
              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                boundaryGap: false,
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: { margin: 2, textStyle: { color: '#aaa' }}
              },
              yAxis: {
                type: 'category',
                name: 'TOP 20',
                nameGap: 16,
                axisLine: { show: false, lineStyle: { color: '#ddd' }},
                axisTick: { show: false, lineStyle: { color: '#ddd' }},
                axisLabel: { interval: 0, textStyle: { color: '#ddd' }},
                data: []
              },
              series: [{
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertedData[0],
                symbolSize: function(val) {
                  if (val[2] < 800) {
                    return 8
                  }
                  if (val[2] > 16000) {
                    return 20
                  }
                  return val[2] / 400
                },
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                  },
                  emphasis: {
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#ddb926'
                  }
                }
              },
              {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertedData[1],
                symbolSize: function(val) {
                  if (val[2] < 800) {
                    return 8
                  }
                  if (val[2] > 16000) {
                    return 40
                  }
                  return val[2] / 400
                },
                showEffectOn: 'emphasis',
                rippleEffect: {
                  brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                  normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                  }
                },
                zlevel: 1
              },
              {
                id: 'bar',
                zlevel: 2,
                type: 'bar',
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: '#ddb926'
                  }
                },
                data: []
              }
              ]
            }
            map.setOption(option)
            map.on('brushselected', renderBrushed)
            setTimeout(function() {
              map.dispatchAction({
                type: 'brush',
                areas: [{
                  geoIndex: 0,
                  brushType: 'polygon',
                  coordRange: [
                    [119.72, 34.85],
                    [119.68, 34.85],
                    [119.5, 34.84],
                    [119.19, 34.77],
                    [118.76, 34.63],
                    [118.6, 34.6],
                    [118.46, 34.6],
                    [118.33, 34.57],
                    [118.05, 34.56],
                    [117.6, 34.56],
                    [117.41, 34.56],
                    [117.25, 34.56],
                    [117.11, 34.56],
                    [117.02, 34.56],
                    [117, 34.56],
                    [116.94, 34.56],
                    [116.94, 34.55],
                    [116.9, 34.5],
                    [116.88, 34.44],
                    [116.88, 34.37],
                    [116.88, 34.33],
                    [116.88, 34.24],
                    [116.92, 34.15],
                    [116.98, 34.09],
                    [117.05, 34.06],
                    [117.19, 33.96],
                    [117.29, 33.9],
                    [117.43, 33.8],
                    [117.49, 33.75],
                    [117.54, 33.68],
                    [117.6, 33.65],
                    [117.62, 33.61],
                    [117.64, 33.59],
                    [117.68, 33.58],
                    [117.7, 33.52],
                    [117.74, 33.5],
                    [117.74, 33.46],
                    [117.8, 33.44],
                    [117.82, 33.41],
                    [117.86, 33.37],
                    [117.9, 33.3],
                    [117.9, 33.28],
                    [117.9, 33.27],
                    [118.09, 32.97],
                    [118.21, 32.7],
                    [118.29, 32.56],
                    [118.31, 32.5],
                    [118.35, 32.46],
                    [118.35, 32.42],
                    [118.35, 32.36],
                    [118.35, 32.34],
                    [118.37, 32.24],
                    [118.37, 32.14],
                    [118.37, 32.09],
                    [118.44, 32.05],
                    [118.46, 32.01],
                    [118.54, 31.98],
                    [118.6, 31.93],
                    [118.68, 31.86],
                    [118.72, 31.8],
                    [118.74, 31.78],
                    [118.76, 31.74],
                    [118.78, 31.7],
                    [118.82, 31.64],
                    [118.82, 31.62],
                    [118.86, 31.58],
                    [118.86, 31.55],
                    [118.88, 31.54],
                    [118.88, 31.52],
                    [118.9, 31.51],
                    [118.91, 31.48],
                    [118.93, 31.43],
                    [118.95, 31.4],
                    [118.97, 31.39],
                    [118.97, 31.37],
                    [118.97, 31.34],
                    [118.97, 31.27],
                    [118.97, 31.21],
                    [118.97, 31.17],
                    [118.97, 31.12],
                    [118.97, 31.02],
                    [118.97, 30.93],
                    [118.97, 30.87],
                    [118.97, 30.85],
                    [118.95, 30.8],
                    [118.95, 30.77],
                    [118.95, 30.76],
                    [118.93, 30.7],
                    [118.91, 30.63],
                    [118.91, 30.61],
                    [118.91, 30.6],
                    [118.9, 30.6],
                    [118.88, 30.54],
                    [118.88, 30.51],
                    [118.86, 30.51],
                    [118.86, 30.46],
                    [118.72, 30.18],
                    [118.68, 30.1],
                    [118.66, 30.07],
                    [118.62, 29.91],
                    [118.56, 29.73],
                    [118.52, 29.63],
                    [118.48, 29.51],
                    [118.44, 29.42],
                    [118.44, 29.32],
                    [118.43, 29.19],
                    [118.43, 29.14],
                    [118.43, 29.08],
                    [118.44, 29.05],
                    [118.46, 29.05],
                    [118.6, 28.95],
                    [118.64, 28.94],
                    [119.07, 28.51],
                    [119.25, 28.41],
                    [119.36, 28.28],
                    [119.46, 28.19],
                    [119.54, 28.13],
                    [119.66, 28.03],
                    [119.78, 28],
                    [119.87, 27.94],
                    [120.03, 27.86],
                    [120.17, 27.79],
                    [120.23, 27.76],
                    [120.3, 27.72],
                    [120.42, 27.66],
                    [120.52, 27.64],
                    [120.58, 27.63],
                    [120.64, 27.63],
                    [120.77, 27.63],
                    [120.89, 27.61],
                    [120.97, 27.6],
                    [121.07, 27.59],
                    [121.15, 27.59],
                    [121.28, 27.59],
                    [121.38, 27.61],
                    [121.56, 27.73],
                    [121.73, 27.89],
                    [122.03, 28.2],
                    [122.3, 28.5],
                    [122.46, 28.72],
                    [122.5, 28.77],
                    [122.54, 28.82],
                    [122.56, 28.82],
                    [122.58, 28.85],
                    [122.6, 28.86],
                    [122.61, 28.91],
                    [122.71, 29.02],
                    [122.73, 29.08],
                    [122.93, 29.44],
                    [122.99, 29.54],
                    [123.03, 29.66],
                    [123.05, 29.73],
                    [123.16, 29.92],
                    [123.24, 30.02],
                    [123.28, 30.13],
                    [123.32, 30.29],
                    [123.36, 30.36],
                    [123.36, 30.55],
                    [123.36, 30.74],
                    [123.36, 31.05],
                    [123.36, 31.14],
                    [123.36, 31.26],
                    [123.38, 31.42],
                    [123.46, 31.74],
                    [123.48, 31.83],
                    [123.48, 31.95],
                    [123.46, 32.09],
                    [123.34, 32.25],
                    [123.22, 32.39],
                    [123.12, 32.46],
                    [123.07, 32.48],
                    [123.05, 32.49],
                    [122.97, 32.53],
                    [122.91, 32.59],
                    [122.83, 32.81],
                    [122.77, 32.87],
                    [122.71, 32.9],
                    [122.56, 32.97],
                    [122.38, 33.05],
                    [122.3, 33.12],
                    [122.26, 33.15],
                    [122.22, 33.21],
                    [122.22, 33.3],
                    [122.22, 33.39],
                    [122.18, 33.44],
                    [122.07, 33.56],
                    [121.99, 33.69],
                    [121.89, 33.78],
                    [121.69, 34.02],
                    [121.66, 34.05],
                    [121.64, 34.08]
                  ]
                }]
              })
            }, 0)
            function renderBrushed(params) {
              var mainSeries = params.batch[0].selected[0]
              var selectedItems = []
              var categoryData = []
              var barData = []
              var maxBar = 30
              var sum = 0
              var count = 0
              for (var i = 0; i < mainSeries.dataIndex.length; i++) {
                var rawIndex = mainSeries.dataIndex[i]
                var dataItem = convertedData[0][rawIndex]
                var pmValue = dataItem.value[2]
                sum += pmValue
                count++
                selectedItems.push(dataItem)
              }
              selectedItems.sort(function(a, b) {
                return a.value[2] - b.value[2]
              })
              for (var j = 0; j < Math.min(selectedItems.length, maxBar); j++) {
                categoryData.push(selectedItems[j].name)
                barData.push(selectedItems[j].value[2])
              }
              this.setOption({
                yAxis: {
                  data: categoryData
                },
                xAxis: {
                  axisLabel: { show: !!count }
                },
                title: {
                  id: 'statistic',
                  text: count ? '平均: ' + (sum / count).toFixed(4) : ''
                },
                series: {
                  id: 'bar',
                  data: barData
                }
              })
            }
            var randomValue = function(data) {
              return Math.round(Math.random() * 1000)
            }
            appProvinceReq().then(response => {
              console.log(response.data.appProvinceReqJson, 'appProvinceReqJson')
              const json = response.data
              _this.mapArr = json.appProvinceReqJson
              var ReqJson = []
              var totalJson = []
              _this.mapArr.forEach(function(element, index) {
                ReqJson.push({ name: element.province, value: element.userCnt })
                totalJson.push({ name: element.province, value: element.totalReq })
              }, 1000)
            })
            queryData(listQuery).then(response => {
              const json = response.data
              console.log(json, 'mapDataList')

              var geoCoordMap = {
                '香港': [114.08, 22.2],
                '澳门': [113.33, 22.13],
                '台湾': [121.5, 25.03],
                '广东': [113.5107, 23.2196],
                '北京': [116.4, 39.9],
                '天津': [117.2, 39.12],
                '上海': [121.47, 31.23],
                '重庆': [106.55, 29.57],
                '广西': [108.37, 22.82],
                '海南': [110.32, 20.03],
                '湖南': [112.93, 28.23],
                '湖北': [114.3, 30.6],
                '江苏': [118.78, 32.07],
                '石家庄': [114.52, 38.05],
                '江西': [115.85, 28.68],
                '吉林': [126.55, 43.83],
                '四川': [104.07, 30.67],
                '青海': [101.78, 36.62],
                '安徽': [117.25, 31.83],
                '福建': [119.3, 26.08],
                '拉萨': [91.13, 29.65],
                '山东': [116.98, 36.67],
                '浙江': [120.15, 30.28],
                '河南': [113.62, 34.75],
                '贵州': [106.63, 26.65],
                '云南': [102.72, 25.05],
                '内蒙古': [111.73, 40.83],
                '宁夏': [106.28, 38.47],
                '新疆': [87.62, 43.82]
              }
              var convertData = function(data) {
                var res = []
                for (var i = 0; i < data.length; i++) {
                  var geoCoord = geoCoordMap[data[i].name]
                  if (geoCoord) {
                    res.push({
                      name: data[i].name,
                      value: geoCoord.concat(data[i].value)
                    })
                  }
                }
                return res
              }
              _this.mapDataArr = json.smallMapData
              var tmp = []
              var smallMapData = json.smallMapData
              for (var key in smallMapData) {
                tmp.push(key)
              }
              tmp.forEach(function(element, index) {
                var data2 = []
                var smallMapData2 = smallMapData[element].provinceList
                for (var key2 in smallMapData2) {
                  var hawbMapping = Object()
                  hawbMapping.name = smallMapData2[key2].province
                  hawbMapping.value = smallMapData2[key2].totalReq
                  data2.push(hawbMapping)
                }
                setTimeout(function() {
                  const mapdatachild = echarts.init(document.getElementById(element))
                  // 绘制图表
                  const optiondataChild = {
                    backgroundColor: '#242b3e',
                    borderColor: '#5d6e9c',
                    title: {
                      x: 'center',
                      name: 'element',
                      textStyle: {
                        color: '#b4f5d7'
                      }
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: function(params) {
                        return params.name + ' : ' + params.value[2]
                      }
                    },
                    legend: {
                      orient: 'vertical',
                      y: 'bottom',
                      x: 'right',
                      data: ['pm2.5'],
                      textStyle: {
                        color: '#fff'
                      }
                    },
                    visualMap: {
                      min: 0,
                      max: 200,
                      calculable: true,
                      show: false,
                      text: ['High', 'Low']
                    },
                    geo: {
                      map: 'china',
                      label: {
                        emphasis: {
                          show: false
                        }
                      },
                      itemStyle: {
                        normal: {
                          areaColor: '#323c48',
                          borderColor: '#111'
                        },
                        emphasis: {
                          areaColor: '#2a333d'
                        }
                      }
                    },
                    series: [{
                      type: 'scatter',
                      coordinateSystem: 'geo',
                      data: convertData(data2),
                      // symbol: 'pin',
                      symbolSize: 8,
                      label: {
                        normal: {
                          formatter: '{b}',
                          position: 'right',
                          show: false
                        },
                        emphasis: {
                          show: true
                        }
                      },
                      itemStyle: {
                        emphasis: {
                          borderColor: '#fff',
                          borderWidth: 1
                        }
                      }
                    }, {
                      name: 'categoryA',
                      type: 'map',
                      geoIndex: 0,
                      // tooltip: {show: false},
                      data: [
                        { name: '北京', value: randomValue() },
                        { name: '天津', value: randomValue() },
                        { name: '上海', value: randomValue() },
                        { name: '重庆', value: randomValue() },
                        { name: '河北', value: randomValue() },
                        { name: '河南', value: randomValue() },
                        { name: '云南', value: randomValue() },
                        { name: '辽宁', value: randomValue() },
                        { name: '黑龙江', value: randomValue() },
                        { name: '湖南', value: randomValue() },
                        { name: '安徽', value: randomValue() },
                        { name: '山东', value: randomValue() },
                        { name: '新疆', value: randomValue() },
                        { name: '江苏', value: randomValue() },
                        { name: '浙江', value: randomValue() },
                        { name: '江西', value: randomValue() },
                        { name: '湖北', value: randomValue() },
                        { name: '广西', value: randomValue() },
                        { name: '甘肃', value: randomValue() },
                        { name: '山西', value: randomValue() },
                        { name: '内蒙古', value: randomValue() },
                        { name: '陕西', value: randomValue() },
                        { name: '吉林', value: randomValue() },
                        { name: '福建', value: randomValue() },
                        { name: '贵州', value: randomValue() },
                        { name: '广东', value: randomValue() },
                        { name: '青海', value: randomValue() },
                        { name: '西藏', value: randomValue() },
                        { name: '四川', value: randomValue() },
                        { name: '宁夏', value: randomValue() },
                        { name: '海南', value: randomValue() },
                        { name: '台湾', value: randomValue() },
                        { name: '香港', value: randomValue() },
                        { name: '澳门', value: randomValue() }
                      ]
                    }]
                  }
                  mapdatachild.setOption(optiondataChild)
                }, 1000)
              }, 1000)
            })
          })
        })
        queryData(listQuery).then(response => {
          this.delayData = response.data.avgRequestTimeList
          this.respose_code_pieData = response.data.respose_code_pie

          const delayx = []
          const pc = []
          const legend_data = response.data.respose_code_pie.legend_data
          const series_data = response.data.respose_code_pie.series_data
          this.delayData.forEach(function(item) {
            delayx.push(item.timePoint)
            pc.push(item.pc)
          })
          const product = echarts.init(document.getElementById('sitem1'))
          const option = {
            title: {
              text: '平均响应时间',
              textStyle: {
                color: '#3e8ed7',
                fontSize: 14
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#3e5f8c'
                }
              }
            },
            legend: {
              data: ['pc', 'h5', 'ios'],
              x: 'center',
              y: 'bottom',
              textStyle: {
                color: '#acddfb'
              }
            },
            grid: {
              left: '4%',
              right: '4%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: delayx,
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              }
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#6284b4'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#6284b4'
                }
              }
            }],
            color: ['#fcffa2', '#85ebed', '#c3798a'],
            series: [{
              name: 'pc',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {}},
              data: pc
            }]
          }
          product.setOption(option)

          const crumble = echarts.init(document.getElementById('crumble'))
          const coption = {
            title: {
              text: 'PC响应状态码',
              subtext: '',
              textStyle: {
                color: '#fff'
              },
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: legend_data,
              textStyle: {
                color: '#fff'
              }
            },
            series: [{
              name: '状态码',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: series_data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.8)'
                }
              }
            }],
            color: ['rgb(0,250,154)', 'rgb(105,105,105)', 'rgb(0,128,128)', 'rgb(0,206,209)', 'rgb(240,255,255)', 'rgb(255,0,0)', 'rgb(148,0,211)', 'rgb(255,182,193)', 'rgb(255,165,0)', 'rgb(205,92,92)']
          }
          crumble.setOption(coption)
        })
      }, 1000)
    },
    showNature() {
      var _this = this
      this.natureScreen = true
      setInterval(cupdataList, 1000 * 60)
      function cupdataList() {
        var listQuery = { }
        _this.performance(listQuery)
      }
      cupdataList()
    },
    performance(obj) {
      var _this = this
      cupList(obj).then(response => {
        _this.cpuArr = response.data.cpuJson
        _this.updateTime = '运行指标大屏（' + response.data.updateTime + '）'
        _this.operationTime = response.data.updateTime
        _this.pftimemsg = response.data.timemsg
        _this.pfminute = response.data.minute
        _this.pfhour = response.data.hour
        if (_this.cpuArr === undefined) {
          return
        }
        _this.cpuArr.forEach(function(element, index) {
          const id = 'cpu' + element.id
          const timeData = []
          const pp = JSON.parse(element.cpuJson.substring(1, element.cpuJson.length - 1))
          const time = []
          pp.series[0].values.forEach(function(item2) {
            var now = new Date()
            now.setTime(item2[0])
            var year = now.getFullYear()
            var month = now.getMonth() + 1 > 9 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1)
            var date = now.getDate() > 9 ? now.getDate() : '0' + now.getDate()
            var hour = now.getHours() > 9 ? now.getHours() : '0' + now.getHours()
            var minute = now.getMinutes() > 9 ? now.getMinutes() : '0' + now.getMinutes()
            var timeStr = year + '/' + month + '/' + date + ' \n ' + hour + ':' + minute
            time.push(timeStr)
            timeData.push(parseFloat(item2[1] / 60).toFixed(2))
          }, this)
          setTimeout(function() {
            const product = echarts.init(document.getElementById(id))
            const option = {
              animation: false,
              title: {
                left: 'center',
                text: element.domain,
                link: '../../performance/charts.html?name=' + element.domain,
                textStyle: {
                  color: '#fff',
                  fontSize: 15
                },
                subtextStyle: {
                  color: '#fff'
                }
              },
              legend: {
                top: 'bottom'
              },
              tooltip: {
                trigger: 'axis',
                position: function(pt) {
                  return [pt[0], 130]
                }
              },
              xAxis: {
                show: false,
                type: 'category',
                boundaryGap: [0, 0],
                splitNumber: 10,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#6284b4'
                  }
                },
                data: time
              },
              yAxis: {
                // min: 0,
                // max: 500,
                show: false,
                type: 'value',
                axisTick: {
                  inside: true
                },
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#6284b4'
                  }
                },
                axisLabel: {
                  show: false
                  // inside: true,
                  // formatter: '{value}\n'
                },
                z: 10
              },
              grid: {
                top: 100,
                left: 15,
                right: 15,
                height: 120,
                containLabel: false
              },
              dataZoom: [{
                type: 'inside',
                throttle: 50
              }],
              series: [{
                name: 'QPS',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                sampling: 'average',
                itemStyle: {
                  normal: {
                    color: '#356aac'
                  }
                },
                stack: 'a',
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#417aaf'
                    }, {
                      offset: 1,
                      color: '#254a7f'
                    }])
                  }
                },
                data: timeData
              }]
            }
            product.setOption(option)
          }, 1000)
        })
      })
    },
    proChart(ctype) {
      if (ctype === undefined || ctype === null) ctype = 'line'
      setTimeout(function() {
        const product = echarts.init(document.getElementById('proChart'))
        const option = {
          xAxis: {
            type: 'category',
            data: ['03:44:22', '13:44:22', '20:44:22', '23:44:22', '33:44:22', '43:44:22', '44:44:22']
          },
          yAxis: {},
          series: [{
            type: ctype,
            data: [2, 2, 32, 4, 9, 19, 3]
          }]
        }
        product.setOption(option)
      }, 1000)
    },
    changeChartType(val) {
      console.log(val, 'val')
      this.proChart(val)
    },
    submitForm() {},
    setMonitor() {},
    delMonitor() {}
  }
}

</script>
<style lang="scss">
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.fr {
  float: right;
  margin-right: 10px;
}

.fl {
  float: left;
  margin-right: 10px;
}

.detail-header {
  padding: 0 15px;
  margin-bottom: 10px;
  overflow: hidden;
  .console-title {
    padding: 16px 0px;
    min-height: 70px;
    border-bottom: 1px solid #eee;
    position: relative;
    h5 {
      display: inline-block;
      text-indent: 2;
      border-left: 2px solid #88B7E0;
      margin: 8px 0;
      margin-right: 8px;
      vertical-align: top;
      .title {
        padding: 0 10px;
      }
      .btn-xs {
        font-size: 12px;
        padding: 2px 8px;
        height: 20px;
        line-height: 14px;
      }
    }
    .stayRight {
      position: absolute;
      top: 15px;
      right: 0;
      overflow: hidden;
      .refresh {
        float: left;
        margin-right: 10px;
        color: #333;
        border: 1px solid #ddd;
        background-color: #F7F7F7;
      }
    }
  }
}

.chart-container {
  width: 100%;
  height: 80%;
  .chartChose {
    margin-bottom: 20px;
    padding: 10px 0 50px;
    border-bottom: 1px solid #eee;
    .setTime {
      .setTimebtn {
        background: #666;
        padding: 4px 10px;
        border: none;
        border-radius: 0;
      }
      .active {
        background: #222;
      }
      .datePicker {
        margin-left: 10px;
      }
    }
  }
  .chartShow {
    overflow: hidden;
  }
  .chartChildItem {
    height: 400px;
    width: 33%;
    left: 0; // margin-left: 5%;
    float: left;
    position: relative;
    .chart-panel {
      height: 400px;
      width: 100%;
      left: 0;
      position: relative;
    }
  }
}

.proChart {
  width: 100%;
  height: 300px;
}

.chartType {
  position: absolute;
  right: 0;
  top: 50px;
}

.screen {
  background: #222931;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  .el-dialog__title {
    color: #e2fdff;
  }
  .screenbd {
    clear: both;
  }
  .screenItem {
    width: 25%;
    margin-right: 1%;
    .sitem1 {
      position: relative;
      border-radius: 3px;
      border: 2px solid #6c7ea6;
      margin-bottom: 10px;
      .itemleft {
        height: 290px;
        padding: 10px 0;
        box-sizing: border-box;
      }
    }
    .crumble {
      .itemleft {
        height: 250px;
        padding: 10px 0;
        box-sizing: border-box;
      }
    }
    .sitem3 {
      height: 150px;
      position: relative;
      border-radius: 3px;
      border: 2px solid #6c7ea6;
      background: #242b3e;
      margin-bottom: 10px;
      width: 48%;
      margin-right: 2%;
      box-sizing: border-box;
      ul {
        width: 50%;
        padding: 20px 0;
        margin: 0;
        li {
          color: #bdfcff;
          background: #5e9bba;
          margin-bottom: 10px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          padding: 0 4px;
          font-size: 12px;
        }
      }
      .mapData {
        width: 50%;
        height: 146px;
        margin: 0;
      }
    }
  }
  .screenMap {
    width: 44%;
    .sitem2 {
      position: relative;
      border: 2px solid #6c7ea6;
      border-radius: 3px;
      .itemmid {
        width: 100%;
        height: 600px;
        padding: 10px;
        box-sizing: border-box;
      }
    }
    .mapbt {
      overflow: hidden;
      height: 256px;
      background: #242b3e;
      li {
        width: 50%;
        margin-left: 2.2%;
        margin-right: 0;
        h5 {
          color: #abdeef;
          text-align: center;
          line-height: 30px;
          margin: 0;
        }
      }
      .mapChild {
        height: 200px;
        width: 100%;
        border: 1px solid #6c7ea6;
        position: relative;
        .maptop {
          position: absolute;
          top: 140px;
          left: 0;
          overflow: hidden;
          width: 100%;
          height: 60px;
          dl {
            color: #abdeef;
            width: 30%;
            margin: 0 0 0 2%;
            font-size: 12px;
            dt {
              font-size: 12px;
              white-space: nowrap;
              overflow: hidden;
              margin: 0;
            }
            dd {
              color: #bdfcff;
              background: #5e9bba;
              margin: 10px 0 0;
              line-height: 20px;
              white-space: nowrap;
              overflow: hidden;
              padding: 0 4px;
            }
          }
        }
        .mapChildm {
          height: 200px;
        }
      }
    }
  }
  .screenItemRight {
    width: 28%;
    margin-right: 0;
  }
  .angle {
    position: absolute;
    border: 2px solid #cce6ff;
    display: block;
    width: 6px;
    height: 6px;
  }
  .anglelt {
    top: -2px;
    left: -2px;
    border-top-left-radius: 3px;
    border-bottom: none;
    border-right: none;
  }
  .anglelb {
    bottom: -2px;
    left: -2px;
    border-bottom-left-radius: 3px;
    border-top: none;
    border-right: none;
  }
  .anglert {
    right: -2px;
    top: -2px;
    border-top-right-radius: 3px;
    border-bottom: none;
    border-left: none;
  }
  .anglerb {
    right: -2px;
    bottom: -2px;
    border-bottom-right-radius: 3px;
    border-top: none;
    border-left: none;
  }
}

.natureSbg {
  background: #222931;
  width: 100%;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: scroll;
  .el-dialog__title {
    color: #e2fdff;
  }
  .el-dialog__header {
    text-align: center;
  }
  .naturebd {
    overflow: hidden;
    padding-top: 10px;
  }
}

.sub {
  text-align: center;
  color: #e2fdff;
  padding-bottom: 30px;
}

.natureCharts {
  width: 20%; // padding: 10px;
  box-sizing: border-box;
  float: left;
  position: relative;
  .cpumem {
    position: absolute;
    left: 25%;
    bottom: 20%;
    width: 50%;
    text-align: center;
    color: #e2fdff;
    font-size: 12px;
  }
  .subtitle {
    position: absolute;
    left: 5%;
    top: 15%;
    width: 100%;
    color: #e2fdff;
    font-size: 1px;
  }
  .nature-panel {
    height: 200px;
    width: 100%;
    left: 0;
    position: relative;
  }
}
.navigation{
  color: #e2fdff;
  height: 20px;
  .msg{
    float: left;
  }
  .hourtag{
    float: right;
  }
}


</style>
